<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开课吧 购物车</title>
  
    <style>
         .activeCourse{background: #ccc;}
         .trasitionDiv{width: 200px;height: 200px;background:red;}
        .fade-enter{opacity:0;}
        .fade-enter-active{transition:opacity 1.5s}
        .fade-leave-active{transition:opacity 1.5s}
 
        .trasitionDiv{width: 200px;height: 200px;background:red;}
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="animate.css">
   
</head>
<body>
    <!-- 宿主文件 -->
    <div id="app">
        {{title}}
        <button @click='trasitionDivFlag=!trasitionDivFlag'>trasitionDivFlagClick</button>
        <transition name="fade"> <div class='trasitionDiv fade-enter fade-enter-active' v-if='trasitionDivFlag'>打住</div></transition>
        <!-- <transition  enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"> <div class='trasitionDiv' v-if='trasitionDivFlag'></div></transition> -->
       
        <message v-if="show"   :show.sync="show"  >
            <template v-slot:title2="slotProps">{{slotProps.title}}</template>
            <template>添加课程成功！</template>
            
        </message>
        <add-course @add-course="addCourse"  v-model="course" ></add-course>
        <!-- 批量更新价格 -->
        <p><input type="text" v-model.number="price" type="number" step="1" /> <button @click="batchUpdate">批量更新价格</button></p>
        <!-- 列表组件 -->
        <course-list :courses="courses"></course-list>
        
        <!-- render实现title -->
        <heading level='1':title='title' icon='cart'/>{{title}} </heading>
        <h2 :title="title">
           <svg class='icon'>
               <use   xlink:href='#icon-cart' ></use>
           </svg> {{title}}
        </h2>
        <!-- 商品总数 -->
        <p>
            <!-- 表达式 -->
            课程总数：{{courses.length + '门'}}
            课程总数：{{total}}
            课程总数：{{totalLength}}
        </p>
        <!-- 计算属性缓存 --> 
        <p>
            <span>{{date1()}}</span> -- <span>{{date2}}</span>
        </p>
        <!-- v-permission -->
        <div>
            <button v-permission="'admin'">管理员操作按钮</button>
        </div>
       
    </div>
</body>
</html>
<script src="vue.js"></script>
<script src="https://at.alicdn.com/t/font_2269960_oyqhul0bll8.js"></script>
<script src='./plugin/headings.js'></script>
<script>
 
    //混入
    const myMaxin={
        created () {
           
            console.log('myMaxin log');
 
        }
    }
    Vue.directive('focus',{
        inserted (el){
            el.focus()
        }
    })
 
    //添加弹窗组件
    Vue.component("message",{
        props: {
            show: {
                type: Boolean,
                default: false
            }
 
        },
        methods: {
            callFun() {
                console.log('callFun')
            }
        }
    })
    //render实现heading
    Vue.component('heading',{
        props:['level','title','icon'],
       render(h){
            //子节点数组
            let children=[]
            //icon属性处理逻辑
            if(this.icon){
                //<svg class="icon"><use xlink:href="#icon-cart"/></svg>
                children.push(h(
                    'svg',
                    {class:'icon'},
                    [h(
                        'use',
                        {attrs:{'xlink:href':'#icon-'+this.icon}}
                    )]
                ))
            }
            children=children.concat(this.$slots.default)
            const VNode=h(
                'h'+this.level,//参数1，tagName
                {attrs:{title:this.title}},//参数2
                children//参数3：子节点VNode
            )
            console.log(VNode,11)
           return  VNode
        }
    })
    //添加弹窗组件
    Vue.use(myPlugin)
     //添加课程列表组件
     Vue.component('add-course',{
        props: {
            value: {
                type: String,
                default:"" 
            },
        },
        methods: {
            addCourse() {
                this.$emit("add-course");
                
            },
            onInput(e) {
                this.$emit("input",e.target.value)
            }
        }, 
        template:`
        <div>
         <p><input @input="onInput" :value="value" type="text" @keydown.enter="addCourse" v-focus/></p>
         <button @click="addCourse">新增</button>
        </div>`,
    })
 
    //课程列表组件
    Vue.component('course-list',{
        data() {
            return {
                selectedCourse:'',
            }
        },
        filters: {
            currency: function(value,symbol='￥') {
                return symbol + value;
            }
        },
        props: {
            courses: {
                type: Array,
                default: []
            },
        },
        filters: {
            priceFilter: function(value,symbol='$') {
                return symbol + value;
            }
        },
        template:`
        <div v-if="courses.length==0">没有任何课程信息</div>
        <div v-else>
 
            <transition-group name="fade">
                <p @click="selectedCourse=item" :class="{activeCourse:selectedCourse === item}"  v-for="item in courses" :key="item.name"> {{ item.name }} 价格是：{{item.price | priceFilter('$')}}</p>
            </transition-group>
 
        </div>`,
    })
    function getCourse(){
        return new Promise((resolve)=>{
            setTimeout(function(){
                resolve([{name:"web全找课程"},{name:"web高级课程"}]);
            },2000)
        })
    }
    const role='user'
    Vue.directive('permission',{
        inserted (el,binding){
            if(binding.value !=role){
                //要求的角色和用户的角色不匹配的时候，我就没有存在的价值，就要删除掉
                el.parentElement.removeChild(el)
            }
        }
    })
    const app= new Vue({
        el:"#app",
       
        data() {
            return {
                title: "hello vue!",
                course:"",
                courses:[],
                title:"开课吧 购物车",
                totalLength:0,
                show:false,
                trasitionDivFlag:false,
                role:'admin',
                price:0
                
            }
        },
        async created () {
            const courses = await getCourse();
            this.courses=courses;
            //批量的更新课程价格
            this.batchUpdate();
            
        },
        methods: {
            addCourse() {
                
              this.courses.push({name:this.course});
              this.course="";
              this.show=true;
            },
            date1(){
                return new Date();
            },
            batchUpdate(){
                this.courses.forEach((c) => {
                   // c.price=this.price;
                    Vue.set(c,'price',this.price)
                });
            },
        },
        computed: {
            total() {
                return this.courses.length + '门' 
            },
            date2(){
                return new Date();
            }
        },
        watch: {
            courses:{
                immediate:true,
                deep:true,
                handler(newValue,oldValue){
                    this.totalLength = newValue.length + '门';
                }
            }
        },
    })
    setTimeout(function(){
        app.title='mua~,vue'
    },3000)
</script>
